@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"


#tournaments-list-modal
  .modal-dialog
    margin: 60px auto 0 auto
    padding: 0
    width: 1210px
    background: none

  .mini-tournaments
    min-height: 836px
    border-radius: 10px
    background-image: url("/images/pages/play/modal/subscribe-background-blank.png")
    background-size: 100% auto
    padding: 340px 60px 60px 60px

  h1
    position: absolute
    top: 160px
    margin: 0
    width: 100%
    text-align: center
    color: rgb(254,188,68)
    font-size: 45px
    text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0, black 6px 6px 6px
    font-variant: normal
    text-transform: uppercase
    margin-left: -30px

  h2
    font-size: 26px

  #close-modal
    position: absolute
    left: 915px
    top: 135px
    width: 120px
    height: 120px
    color: white
    text-align: center
    font-size: 45px
    padding-top: 15px
    cursor: pointer
    @include rotate(-3deg)

    &:hover
      color: yellow

  a.tile
    display: block
    width: 100%
    position: relative
    margin-bottom: 6px
    text-shadow: 2px 2px 5px black
    border-radius: 6px
    overflow: hidden
    background-color: rgb(58,47,38)

    @media only screen and (min-width: 1200px)
      height: 76px

    .play-text-container, .stats-text-container
      position: absolute

    .play-text-container
      right: 5px
      bottom: 0

      .play-text
        font-size: 18px
        line-height: 24px

    .stats-text-container
      left: 5px
      bottom: 0

      .stats-text
        font-size: 18px
        line-height: 24px

    .level-image
      @include transition(filter .10s linear, opacity .10s linear)
      filter: brightness(80%) contrast(80%)
      width: 100%
      height: 100%
      // Need to set an explicit height on .tile parent for this to work
      object-fit: cover

      &.placeholder
        filter: brightness(50%) contrast(80%)

    .overlay-text
      font-family: $headings-font-family
      font-variant: small-caps
      @include transition(color .10s linear, text-shadow .10s linear)
      color: black
      text-shadow: none

      &.dynamic-level-name
        position: absolute
        z-index: 1
        top: calc(37% - 23px)
        width: 100%
        text-align: center
        font-size: 24px
        color: $yellow
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black

    .tile-text-backdrop
      position: absolute
      bottom: 0
      left: 0
      right: 0
      height: 23px
      opacity: 90%
      background-color: #D0C4AC
      border: 2px solid #B5AA8F
      color: #B5AA8F
      border-top: 0
      @include transition(opacity .10s linear, background-color .10s linear, border-color .10s linear)

    &[disabled]
      opacity: 0.7
      cursor: default

    &:hover:not([disabled])
      div, .dynamic-level-name
        // TODO: is this duplicate? Do we need div?
        color: lighten($yellow, 20%)

      img.level-image
        filter: brightness(120%) contrast(100%)
        box-shadow: 0 0 5px black

      .overlay-text
        color: $yellow
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black

        &.dynamic-level-name
          text-shadow: 0px 2px 2px black, -2px 0px 2px black, 2px 0px 2px black, 0px -2px 2px black

      .tile-text-backdrop
        opacity: 75%
        background-color: darken(#D0C4AC, 10%)
        border-color: darken(#B5AA8F, 10%)
